<template>
	<view class="update-phone-num">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="line"></view>
		<view class="main-wrap">
			<view class="phone">
				<text>新手机号</text>
				<input type="text" placeholder="请输入新手机号" v-model="params.mobile" placeholder-class="ipt-class" />
			</view>
			<view class="code">
				<text>验证码</text>
				<input type="text" placeholder="请输入验证码" v-model="params.code" placeholder-class="ipt-class" />
				<button :disabled="sendCode" @click="getCode">{{sendCode?num+'s后重试':'获取验证码'}}</button>
			</view>
		</view>
		<view class="btn-wrap">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from "../../request/index.js"

	import {
		ref,
		reactive
	} from 'vue'
	let num = ref(60)
	let name = "更换手机号"
	let sendCode = ref(false)
	let params = reactive({})
	let getCode = () => {
		let reg = /^1\d{10}$/
		if (!reg.test(params.mobile)) {
			uni.showToast({
				title: "手机格式不正确",
				icon: "error"
			})
			return
		}
		http({
			url: '/sms/sendsms',
			data: {
				type: '3',
				mobile: params.mobile
			}
		}).then((res) => {

			if (res.code == 0) {
				sendCode.value = true
				uni.showToast({
					title: '发送成功',
					icon: 'success'
				})
				let timer = setInterval(() => {
					num.value -= 1

					if (num.value == 1) {
						num.value = 60
						clearInterval(timer)
					}
				}, 1000)
			}
		})
	}
	let submit = () => {
		let reg = /^1\d{10}$/
		if (!reg.test(params.mobile)) {
			uni.showToast({
				title: "手机格式不正确",
				icon: "error"
			})
			return
		}
		if (!params.code) {
			uni.showToast({
				title: "请输入验证码",
				icon: "error"
			})
			return
		}
		http({
			url: '/user/changeMobile',
			data: params
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 30rpx;
		color: #CCCCCC;

	}

	.update-phone-num {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.line {
			background-color: #F3F5F7;
			height: 16rpx;
			width: 100vw;
		}

		.btn-wrap {
			padding: 0 38rpx;
			margin-top: 154rpx;

			button {
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;

				width: 100%;
				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;
			}

		}

		.main-wrap {
			padding: 0 34rpx;

			.phone {
				height: 115rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #E2E1E1;

				text {

					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					flex-shrink: 0;

				}

				input {
					width: 100%;
					height: 100%;
					padding-left: 70rpx;
				}
			}

			.code {
				display: flex;
				height: 127rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #E2E1E1;

				text {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					flex-shrink: 0;
				}

				input {
					width: 100%;
					height: 100%;
					padding-left: 91rpx;
				}

				button {
					width: 175rpx;
					height: 59rpx;
					background: #0874FA;
					border-radius: 7rpx;
					padding: 0;
					flex-shrink: 0;
					font-weight: 400;
					font-size: 29rpx;
					color: #FFFFFF;
					margin: 0;
					line-height: 59rpx;
				}
			}
		}


	}
</style>